<template>
  <div class="a">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="火点名称"> </el-table-column>
      <el-table-column prop="name" label="经度"> </el-table-column>
      <el-table-column prop="address" label="纬度"> </el-table-column>
      <el-table-column prop="address" label="地点"> </el-table-column>
      <el-table-column prop="address" label="发布时间"> </el-table-column>
      <el-table-column prop="address" label="灾害区"> </el-table-column>
      <el-table-column prop="address" label="人口危险区"> </el-table-column>
      <el-table-column prop="address" label="财产危险区"> </el-table-column>
      <el-table-column prop="address" label="备注"> </el-table-column>
      <el-table-column prop="address" label="附加信息"> </el-table-column>
      <el-table-column prop="address" label="站名"> </el-table-column>
      <el-table-column prop="address" label="编号"> </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="left">
        <p>数据区</p>
        <div class="big">
          <div><span>火点名称*</span><el-input></el-input></div>
          <div><span>经度*</span><el-input></el-input></div>
        </div>
        <div class="big">
          <div><span>地区</span><el-input></el-input></div>
          <div><span>纬度*</span><el-input></el-input></div>
        </div>
        <div class="big">
          <div class="fbsj">
            <span>发布时间</span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <div style="color: red">*为必填项</div>
        </div>
        <div class="big">
          <div><span>受灾人口*</span><el-input></el-input></div>
          <div><span>受灾面积*</span><el-input></el-input></div>
        </div>
        <div class="big">
          <div><span>备注</span><el-input></el-input></div>
          <div><span>财产损失*</span><el-input></el-input></div>
        </div>
        <div class="big">
          <div><span>站点名称</span><el-input></el-input></div>
          <div><span>附加消息</span><el-input></el-input></div>
        </div>
      </div>
      <div class="right">
        <p>操作区</p>
        <el-button type="small">占选</el-button>
        <el-button type="small">定位</el-button>
        <el-button type="small">新建</el-button>
        <el-button type="small">添加</el-button>
        <el-button type="small">修改</el-button>
        <el-button type="small">删除</el-button>
      </div>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.bottom {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 65%;
  margin-top: 10px;
  border: 1px solid #dedede;
  padding: 10px;
  box-sizing: border-box;
  .el-input,
  .el-date-editor {
    width: 150px;
  }
  p {
    margin: 10px;
  }
  .big {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 5px;
    div {
      display: flex;
      align-items: center;
      span {
        width: 70px;
      }
    }
  }
  .fbsj {
    margin-left: -55px;
  }
}
.right {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  align-items: center;
  p {
    margin: 10px;
  }
  .el-button {
    margin: 10px;
  }
}
</style>
